<template>
  <div class="order-edit-container">
    <!-- 工具栏 -->
    <div class="toolbar">
      <el-button-group>
        <el-button type="primary" icon="el-icon-back" size="small" @click="goBack">返回</el-button>
        <el-button type="success" icon="el-icon-check" size="small" @click="saveOrder">保存</el-button>
        <el-button type="info" icon="el-icon-refresh" size="small" @click="resetForm">重置</el-button>
      </el-button-group>
    </div>

    <!-- 表单内容 -->
    <el-form :model="orderInfo" :rules="rules" ref="orderForm" label-width="120px" class="order-form">
      <!-- 基本信息 -->
      <div class="form-section">
        <div class="section-header">
          <i class="el-icon-document"></i>
          <span>基本信息</span>
        </div>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="订单编号" prop="orderId">
              <el-input v-model="orderInfo.orderId" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="客户名称" prop="customerName">
              <el-input v-model="orderInfo.customerName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="订单来源" prop="orderSource">
              <el-select v-model="orderInfo.orderSource" style="width: 100%">
                <el-option label="小程序下单" :value="1"></el-option>
                <el-option label="手工录入" :value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="运输方式" prop="transportType">
              <el-select v-model="orderInfo.transportType" style="width: 100%">
                <el-option label="整车运输" :value="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="下单日期" prop="orderDate">
              <el-date-picker
                v-model="orderInfo.orderDate"
                type="date"
                style="width: 100%"
                value-format="yyyy-MM-dd"
                placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="订单状态" prop="orderStatus">
              <el-select v-model="orderInfo.orderStatus" style="width: 100%">
                <el-option v-for="(value, key) in orderStatusMap"
                  :key="key"
                  :label="value"
                  :value="Number(key)">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="是否急单" prop="isUrgent">
              <el-switch
                v-model="orderInfo.isUrgent"
                :active-value="1"
                :inactive-value="0">
              </el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="是否可拆" prop="isSplittable">
              <el-switch
                v-model="orderInfo.isSplittable"
                :active-value="1"
                :inactive-value="0">
              </el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="订单备注">
              <el-input type="textarea" v-model="orderInfo.orderRemark" rows="2"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </div>

      <!-- 发货信息 -->
      <div class="form-section">
        <div class="section-header">
          <i class="el-icon-truck"></i>
          <span>发货信息</span>
        </div>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="发货单位" prop="funitName">
              <el-input v-model="orderInfo.funitName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="联系人" prop="fcontactPerson">
              <el-input v-model="orderInfo.fcontactPerson"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="联系电话" prop="ftelephone">
              <el-input v-model="orderInfo.ftelephone"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="联系手机" prop="fmobilePhone">
              <el-input v-model="orderInfo.fmobilePhone"></el-input>
            </el-form-item>
          </el-col>
          <!-- 省市区选择器 -->
          <el-col :span="8">
            <el-form-item label="省市区">
              <el-cascader
                v-model="fregion"
                :options="regionOptions"
                @change="handleFRegionChange">
              </el-cascader>
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item label="详细地址" prop="fdetailedAddress">
              <el-input v-model="orderInfo.fdetailedAddress"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item label="取货时间说明" prop="fpickupTimeNote">
              <el-input v-model="orderInfo.fpickupTimeNote"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item label="要求提货日期" prop="frequiredPickupDate">
              <el-input v-model="orderInfo.frequiredPickupDate"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </div>

      <!-- 收货信息 -->
      <div class="form-section">
        <div class="section-header">
          <i class="el-icon-truck"></i>
          <span>收货信息</span>
        </div>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="收货单位" prop="sunitName">
              <el-input v-model="orderInfo.sunitName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="联系人" prop="scontactPerson">
              <el-input v-model="orderInfo.scontactPerson"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="联系电话" prop="stelephone">
              <el-input v-model="orderInfo.stelephone"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="联系手机" prop="smobilePhone">
              <el-input v-model="orderInfo.smobilePhone"></el-input>
            </el-form-item>
          </el-col>
          <!-- 省市区选择器 -->
          <el-col :span="8">
            <el-form-item label="省市区">
              <el-cascader
                v-model="sregion"
                :options="regionOptions"
                @change="handleFRegionChange">
              </el-cascader>
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item label="收货详细地址" prop="sdetailedAddress">
              <el-input v-model="orderInfo.sdetailedAddress"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item label="回单类型" prop="spickupTimeNote">
              <el-input v-model="orderInfo.spickupTimeNote"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item label="要求到货日期" prop="srequiredPickupDate">
              <el-input v-model="orderInfo.srequiredPickupDate"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
              <el-form-item label="签收时间">
                <span>{{ orderInfo.signoffTime || '未签收' }}</span>
              </el-form-item>
            </el-col>
        </el-row>
      </div>

      <!-- 货物明细 -->
      <div class="form-section">
        <div class="section-header">
          <i class="el-icon-goods"></i>
          <span>货物明细</span>
          <el-button type="primary" size="mini" icon="el-icon-plus" 
            @click="addGoodsRow" style="margin-left: 10px">添加货物</el-button>
        </div>
        <el-table :data="orderInfo.orderGoods" border style="width: 100%">
          <el-table-column type="index" width="80" label="序号"></el-table-column>
          <el-table-column label="货物名称" prop="goodName" width="180">
            <template slot-scope="scope">
              <el-input v-model="scope.row.goodName" size="mini"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="数量" width="150">
            <template slot-scope="scope">
              <el-input-number v-model="scope.row.amount" size="mini" :min="1"></el-input-number>
            </template>
          </el-table-column>
          <el-table-column label="单件重量(kg)" width="150">
            <template slot-scope="scope">
              <el-input-number v-model="scope.row.unitWeight" size="mini" :precision="2"></el-input-number>
            </template>
          </el-table-column>
          <el-table-column label="长(m)" width="150">
            <template slot-scope="scope">
              <el-input-number v-model="scope.row.length" size="mini" :precision="2"></el-input-number>
            </template>
          </el-table-column>
          <el-table-column label="宽(m)" width="150">
            <template slot-scope="scope">
              <el-input-number v-model="scope.row.width" size="mini" :precision="2"></el-input-number>
            </template>
          </el-table-column>
          <el-table-column label="高(m)" width="150">
            <template slot-scope="scope">
              <el-input-number v-model="scope.row.hight" size="mini" :precision="2"></el-input-number>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="90" fixed="right">
            <template slot-scope="scope">
              <el-button type="text" size="mini" @click="removeGoodsRow(scope.$index)" icon="el-icon-delete">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 费用信息 -->
      <div class="form-section">
        <div class="section-header">
          <i class="el-icon-money"></i>
          <span>费用信息</span>
        </div>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="重量运费单价">
              <el-input-number v-model="orderInfo.weightFreightRate" :precision="2"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="体积运费单价">
              <el-input-number v-model="orderInfo.volumeFreightRate" :precision="2"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="运输距离">
              <el-input-number v-model="orderInfo.distance" :precision="2"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="运费合计">
              <el-input-number v-model="orderInfo.totalFreightCost" :precision="2"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="整送附加费">
              <el-input-number v-model="orderInfo.nonSplitSurcharge" :precision="2"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="专送附加费">
              <el-input-number v-model="orderInfo.urgentSurcharge" :precision="2"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="费用合计">
              <el-input-number v-model="orderInfo.totalCost" :precision="2"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="预付款">
              <el-input-number v-model="orderInfo.advancePay" :precision="2"></el-input-number>
            </el-form-item>
          </el-col> 
          <el-col :span="8">
            <el-form-item label="剩余待付">
              <el-input-number v-model="orderInfo.remainingPayment" :precision="2"></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
      </div>

      <!-- 银行账户信息 -->
      <div class="form-section">
        <div class="section-header">
          <i class="el-icon-bank"></i>
          <span>银行账户信息</span>
        </div>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="客户银行信息">
              <div class="bank-info-content">
                <p>
                  <label>收款单位：</label>
                  {{ orderInfo.paymentUnit || '-' }}
                </p>
                <p>
                  <label>开户行：</label>
                  {{ orderInfo.bankName || '-' }}
                </p>
                <p>
                  <label>账号：</label>
                  {{ orderInfo.accountNumber || '-' }}
                </p>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
      </div>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      orderInfo: {
        goodsList: []
      },
      rules: {
        customerName: [{ required: true, message: '请输入客户名称', trigger: 'blur' }],
        // ... 其他验证规则
      },
      fRegion: [], // 发货地区
      sRegion: [], // 收货地区
      regionOptions: [], // 省市区数据
      orderStatusMap: {
        1: '已下单',
        2: '已取消',
        3: '未完成',
        4: '已完成',
        5: '已结算'
      }
    }
  },
  methods: {
    // 获取订单详情
    getOrderDetail() {
        const orderId = this.$route.query.orderId
        this.loading = true
        this.$axios.get(`api/order/queryDetail/`+orderId)
        .then(res => {
          if (res.data.code === 200) {
            this.orderInfo = res.data.data
            // 初始化省市区选择器的值
            // this.initRegionValue()
          } else {
            this.$message.error(res.msg || '获取订单详情失败')
          }
        }).finally(() => {
          this.loading = false
        })
      },
    
    // 添加货物行
    addGoodsRow() {
      this.orderInfo.goodsList.push({
        goodName: '',
        amount: 1,
        unitWeight: 0,
        length: 0,
        width: 0,
        hight: 0
      })
    },
    
    // 删除货物行
    removeGoodsRow(index) {
      this.orderInfo.goodsList.splice(index, 1)
    },
    
    // 保存订单
    saveOrder() {
      this.$refs.orderForm.validate(valid => {
        if (valid) {
          this.$axios.post('api/order/update', this.orderInfo).then(res => {
            if (res.code === 200) {
              this.$message.success('保存成功')
              this.goBack()
            } else {
              this.$message.error(res.msg || '保存失败')
            }
          })
        }
      })
    },
    
    // 重置表单
    resetForm() {
      this.$confirm('确定要重置表单吗？', '提示', {
        type: 'warning'
      }).then(() => {
        this.getOrderDetail()
      })
    },
    
    goBack() {
      this.$router.go(-1)
    }
  },
  created() {
    this.getOrderDetail()
  }
}
</script>

<style scoped>
.order-edit-container {
  padding: 20px;
  background-color: #f5f7fa;
}

.toolbar {
  margin-bottom: 20px;
  padding: 10px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
}

.form-section {
  background: #fff;
  padding: 20px;
  margin-bottom: 20px;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
}

.section-header {
  border-bottom: 2px solid #409EFF;
  padding-bottom: 10px;
  margin-bottom: 20px;
  font-size: 16px;
  font-weight: bold;
  color: #409EFF;
  display: flex;
  align-items: center;
}

.section-header i {
  margin-right: 8px;
  font-size: 20px;
}

.el-form-item {
  margin-bottom: 22px;
}

.el-input-number {
  width: 100%;
}

.el-cascader {
  width: 100%;
}

/* 表格内输入框样式优化 */
.el-table .el-input {
  width: 100%;
}

.el-table .el-input-number {
  width: 100%;
}

/* 添加过渡动画 */
.form-section {
  transition: all 0.3s ease;
}

.form-section:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px 0 rgba(0,0,0,0.15);
}

/* 响应式布局 */
@media screen and (max-width: 1200px) {
  .el-col {
    margin-bottom: 10px;
  }
}

.bank-info-content {
    padding: 10px;
    background-color: #f5f7fa;
    border-radius: 4px;
  }
  
  .bank-info-content p {
    margin: 5px 0;
    line-height: 24px;
  }
  
  .bank-info-content label {
    display: inline-block;
    width: 80px;
    color: #606266;
  }
</style> 